<template>
  <router-view>
    <tab-list :items="tabItems" :currentIndex="currentTabIndex" @change="changeTab"></tab-list>
    <div class="app-body">
      <ul class="activity-list">
        <li v-for="item in list" :key="item.id">
          <div class="shop">
            <img :src="item.shop.avatar">
            <h3>{{item.shop.name}}</h3>
            <i>{{item.shop.state}}</i>
          </div>
          <activity-item :item="item"></activity-item>
        </li>
      </ul>
    </div>
  </router-view>
</template>

<script>
import TabList from '@/components/TabList'
import ActivityItem from '@/components/ActivityItem'

import face from '@/assets/img/tmp/face.jpg'
import avatar from '@/assets/img/tmp/avatar.jpg'

export default {
  data () {
    return {
      tabItems: [
        '全部',
        '待付款',
        '待参与',
        '退款',
        '已结束'
      ],
      currentTabIndex: 0,
      list: [
        {
          face,
          name: '商务房',
          address: '10人间 | 古风装修',
          time: '8:0-0 -22:00',
          shop: {
            avatar,
            name: '茶韵体验店',
            state: '待参与'
          }
        }
      ]
    }
  },
  methods: {
    changeTab (index) {
      this.currentTabIndex = index
    }
  },
  components: {
    TabList,
    ActivityItem
  }
}
</script>

<style lang="scss" scoped>
.activity-list {
  > li {
    margin-top: 0.5em;
    background: $bg;
  }
}
.shop {
  display: flex;
  align-items: center;
  margin: 0 0.5em;
  padding: 0.5em 0;
  border-bottom: 1px solid $border-color;

  > img {
    font-size: 3rem;
    height: 1em;
    width: 1em;
    border-radius: 100%;
  }

  > h3 {
    flex: 1;
    margin-left: 0.5em;
    font-size: $font-size;
  }

  > i {
    color: $color-primary;
  }
}
</style>
